<template>
  <div class="tab-bar-item"  @click="itemClick">
      <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    path: {
      type: String,
      default: '/'
    }
  },
  methods: {
    itemClick(){
      console.log(this.path);
      this.$router.push(this.path);
    }
  }
}
</script>

<style>
    .tab-bar-item{
        flex: 1;
        text-align: center;
        height: 49px;
        margin-top: 3px;
        margin-bottom: 2px;
    }
    .tab-bar-item :hover{
      /* background-color: rgb(122, 163, 238); */
      color: rgb(66, 114, 219);
    }
</style>